<script setup lang="ts">

import QRCode from 'qrcode-generator';
import {defineProps, onMounted, watch} from "vue";import {getActivityForMe} from "@/api/activity";

const props = defineProps({
  id: {
    type: String,
    default: ''
  },
});


const ticket = ref({})

// 判断报名结果
const getActivityForMeFun = () => {
  getActivityForMe(props.id).then(res => {
    console.log(res)
    if (res.data) {
      ticket.value = res.data;
      generateQRCode(res.data.qrCode, 'qrcode-canvas');
    }
  })
}


onMounted(() => {
  getActivityForMeFun();
})

watch(
    () => props.id,
    () => {
      getActivityForMeFun()
    },
    { deep: true, immediate: true }
);




// 生成二维码到 Canvas
const generateQRCode = (text:any, elementId:any) => {
  const typeNumber = 0;            // 自动计算类型
  const errorCorrectionLevel = 'H';// 容错级别
  const qr = QRCode(typeNumber, errorCorrectionLevel);

  qr.addData(text);
  qr.make();

  // 生成 SVG 或 HTML 表格
  const svg = qr.createSvgTag({
    cellSize: 6,                   // 单元格大小
    margin: 4,                     // 边距
    color: '#000',                 // 二维码颜色
    background: '#fff'             // 背景颜色
  });
  // 插入到 DOM
  setTimeout(() =>{
    document.getElementById(elementId).innerHTML = svg;
  },1000)
};

</script>

<template>
  <div class="ticket-box">{{id}}
    <div class="ticket-box-title">我的电子票</div>
    <div class="ticket-info">
      <div class="ticket-title">{{ ticket.activityTitle }}</div>
      <div class="ticket-line">
        {{ticket.startTime}} 至 {{ticket.endTime}}
      </div>
      <div class="ticket-line">
        {{ticket.address}}
      </div>
      <div class="ticket-qs-box">
        <div class=" ticket-left-circle"></div>
        <div class=" ticket-right-circle"></div>
        <div class="ticket-text">
          <span class="label">票种:  </span>
          <span class="value">{{ticket.ticketType}}</span>
          <el-divider direction="vertical" />
          <span class="label">实付:  </span>
          <span class="value">{{ticket.actualPaid}}</span>
        </div>
        <div class="ticket-qs" id="qrcode-canvas"></div>
        <b class="ticket-qscode">{{ticket.qrCode}}</b>
        <div class="ticket-text">
          <span class="label">姓名:  </span>
          <span class="value">{{ticket.name}}</span>
        </div>
        <div class="ticket-text">
          <span class="label">电话号码:  </span>
          <span class="value">{{ticket.phone}}</span>
        </div>
        <div class="ticket-text">
          <span class="label">公司名称:  </span>
          <span class="value">{{ticket.company}}</span>
        </div>
      </div>

    </div>
  </div>
  <div class="ticket-tips">
    <p>温馨提示:</p>
    <p>1. 请不要把电子票随意分享给他人，以免被盗用。</p>
    <p>2. 入场时,请提前打开电子票,调亮手机屏幕,扫描二维码检票入场,1人1票。</p>
  </div>
</template>

<style scoped>
.ticket-box {
  background: #0f47f1;
  border-radius: 10px;
  width: 400px;
  height: 600px;
  margin: 0 auto;
  margin-top: 10px;
}
.ticket-tips{
  margin: 0 auto;
  width: 400px;
  margin-top: 20px;
  font-size: 14px;
  color:#666;
}

.ticket-box-title {
  color: #ffffff;
  font-size: 20px;
  padding: 10px 0;
  margin: 0 20px;
  border-bottom: 1px solid hsla(0,0%,100%,.3);
}

.ticket-info {
  padding: 20px;
  .ticket-title {
    color: #d4fb00;
    line-height: 24px;
  }
  .ticket-line{
    color:#ffffff;
    line-height: 24px;
    margin: 5px 0;
  }
}
.ticket-qs-box{
  border-radius: 10px;
  background: #ffffff;
  padding: 20px;
  height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10px;
  position: relative;
}
.ticket-left-circle{
  background-color: #0f47f1;
  border-radius: 50%;
  height: 30px;
  position: absolute;
  top: 300px;
  width: 30px;
  left: -16px;
}

.ticket-right-circle{
  background-color: #0f47f1;
  border-radius: 50%;
  height: 30px;
  position: absolute;
  top: 300px;
  width: 30px;
  right: -16px;
}
.ticket-qs{
  margin: 0 auto;
  width: 200px;
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ticket-qscode{
  color:#000000;
  font-size: 18px;
}
.ticket-text{
  display: flex;
  margin: 5px 0;
  font-size: 16px;
  align-items: center;
  .label{
    color:#aaaaaa;
  }
  .value{
    color:#333333;
  }
}


</style>